<template>
  <div class="name_container">
   <!-- 双向绑定：v-model:value简写成 v-model，可以实现数据与模板之间的双向流动 -->
    <input type="text" class="first_name" v-model="firstName"/>
    <!--单向绑定, 只能实现从数据到模板的流动，不能实现模板到数据的流动-->
    <input type="text" class="last_name" :value="lastName">
  </div>
</template>
<script setup>
  import { ref } from 'vue';

  let firstName = ref("yang")
  let lastName = ref("zhi")

</script>

<style scoped>

.name_container {
  display: flex;
  flex-direction: column;
}
.first_name, .last_name {
  margin-top: 20px;
  width: 50%;
}


</style>